.audio-plan{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: url('./img/audio-bg.jpg') no-repeat center center;
  background-size: 100% 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 101;
  .line-nav {
    height: 45px;
    position: absolute;
    z-index: 10;
    .reback {
      color: #000000;
      padding: 4px;
      height: 60px;
      font-size: 3em;
    }
  }
  .cover{
    width: 100%;
    text-align: center;
    .cc{
      width: 50vw;
      height: auto;
      display: block;
      margin: 5vh auto 5px auto;
      overflow: hidden;

      img{

        width: 70%;
        height: auto;

      }
    }
  }
  .name{
    text-align: justify;
    padding: 0 7vw;
    min-height: 30vh;
    h3{
      font-weight: bold;
      text-align: center;
      font-size: medium;
      padding: 2vh 0;
    }
    h6{
      text-indent: 1em;
      position: relative;
       max-height: 38px;
      overflow:  auto;
      min-height: 25vh;
      height:200px;
      font-size: 0.8em;



    }

  }
  .control{
    padding: 10px;
    text-align: center;
    audio{
      width: 100%;
    }
  }
  .actions{
    display: flex;
    padding: 0 30px;
  }
  .action-1,.action-5{
    width: 18%;
    text-align: center;
    line-height: 120px;
    .icon{
      font-size: 26px;
    }
    &.active{
      color: #f80;
    }
  }
  .action-2,.action-4{
    width: 20%;
    text-align: center;
    line-height: 120px;
    .icon{
      font-size: 26px;
    }
  }
  .action-3{
    width: 30%;
    text-align: center;
    .icon{
      font-size: 80px;
    }
  }
}